<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            list-style: none;
            display: flex;
        }

        li {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 1px solid;
            text-align: center;
            line-height: 50px;
            /* color: #fff; */
        }
    </style>
</head>

<body>
    <ul id="ul"></ul>

    <script src="../tools.js"></script>
    <script>
        class Ball {
            constructor(color, number) {
                this.color = color;
                this.number = number;
            }
        }

        function create() {
            let s = new Set();
            while (s.size < 6) {
                s.add(random(1, 33));
            }
            let arr = [...s].sort((a, b) => a - b);

            let redBalls = [];
            for (let i = 0; i < arr.length; i++) {
                let obj = new Ball('red', arr[i]);
                redBalls.push(obj);
            }
            let blue = new Ball('blue', random(1, 16));

            return [redBalls, blue];
        }
        let [redBalls, blueBall] = create();

        function render() {
            let str = '';
            for (let item of redBalls) { // item: {}
                str += `<li style='background-color: ${item.color}'>${item.number}</li>`;
            }
            str += `<li style='background-color: ${blueBall.color}'>${blueBall.number}</li>`;
            ul.innerHTML = str;
        }
        render()
    </script>
</body>

</html>